<template>
	<view class="page_box">
		<u-navbar :is-back="false" title=" " v-if="1" :border-bottom="false">
			<view class="slot-wrap padding-lr"><text class="f40 text-bold text-black u-skeleton-fillet">易道堂</text></view>
		</u-navbar>
		<!-- <button type="default">的点点滴滴多</button> -->
		<view class="content_box">
			<view class="padding-lr padding-top-sm " @click="l.to('/pages/index/srchFor')">
				<u-search placeholder="搜索关键字" v-model="keyword" disabled :show-action="false" class="u-skeleton-fillet"></u-search>
			</view>
			<view class="mt30"><u-swiper :list="slide" :height="280" :effect3d="true" bg-color="#fff" border-radius="30" class="u-skeleton-fillet"></u-swiper></view>
			<!-- <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item"></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"></view>
				</swiper-item>
			</swiper> -->
			<!-- <view class="padding flex justify-between" @click="show = !show"> -->
			<view class="padding flex justify-between " @click="show = !show">
				<view class="w330 h120 bgimg1 bg-img u-skeleton-fillet"></view>
				<view class="w330 h120 bgimg2 bg-img u-skeleton-fillet"></view>
			</view>
			<view class=" flex justify-center ">
				<!-- 未支付 -->
				<view class="boder bg-img w690 h160 flex justify-between u-skeleton-fillet " v-if="!user" @click.stop="l.to('/pages/my/myMbr')">
					<view class=" flex flex-direction justify-center ml105">
						<!-- <text class="f30 " style="color: #FBEC9A;">{{ user.card_name }}超级会员</text> -->
						<text class="f30 text-bold" style="color: #FBEC9A;">成为会员</text>
						<text class="f26 mt23" style="color: #FBEC9A;">享折扣,返佣金,赠免费饮品</text>
					</view>
					<view class=" flex align-center mr60">
						<view class="w136 h52 flex align-center  justify-center round " style="background-color: #FBEC9A; color: #776500;">
							<text class="f24">成为会员</text>
						</view>
					</view>
				</view>
				<!-- 已支付 -->
				<view class="" v-else>
					<view class="boder bg-img w690 h160 flex justify-between  u-skeleton-fillet" v-if="user.is_expire" @click.stop="l.to('/pages/my/myMbr')">
						<view class=" flex flex-direction justify-center ml105">
							<!-- <text class="f30 " style="color: #FBEC9A;">{{ user.card_name }}超级会员</text> -->
							<text class="f30 text-bold" style="color: #FBEC9A;">成为会员</text>
							<text class="f26 mt23" style="color: #FBEC9A;">享折扣,返佣金,赠免费饮品</text>
						</view>
						<view class=" flex align-center mr60">
							<view class="w136 h52 flex align-center  justify-center round " style="background-color: #FBEC9A; color: #776500;">
								<text class="f24">成为会员</text>
							</view>
						</view>
					</view>
					<view class="boder bg-img w690 h160 flex justify-between u-skeleton-fillet" @click.stop="l.to('/pages/my/myMbr')" v-else>
						<view class=" flex flex-direction justify-center ml105">
							<text class="f30 text-bold " style="color: #FBEC9A;">{{ user.card_name }}</text>

							<text class="f26 mt23" style="color: #FBEC9A;">{{ user.member_expire_time }}</text>
						</view>
						<view class=" flex align-center mr60">
							<view class="w136 h52 flex align-center  justify-center round " style="background-color: #FBEC9A; color: #776500;">
								<text class="f24">查看特权</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="padding-lr padding-top-xs flex align-center " >
				<image src="../../static/re.png" mode="" class="w36 h36 u-skeleton-fillet"></image>
				<text class="f32 text-bold text-black ml13 u-skeleton-fillet">热门活动</text>
			</view>
			<view class=" ">
				<z-paging
					ref="paging"
					v-model="dataList"
					@query="hm"
					:default-page-size="5"
					loading-more-no-more-text="我也是有底线的！"
					use-page-scroll
					:refresher-enabled="false"
					
				>
					<view class="padding">
						<view v-for="(item, index) in dataList" :key="index">
							<view class="ww100 h342 bg-white u-relative u-skeleton-fillet r20" style="overflow: hidden;" @click="l.to('/pages/index/evntDetails?id=' + item.id)">
								<u-lazy-load
									:image="item.image_url"
									mode="aspectFill"
									class="ww100 h342 "
									imgMode="aspectFill"
									height="342"
									
								></u-lazy-load>
								<image
									src="../../static/mianfei.png"
									mode="aspectFill"
									class="w100 h50 bgimg"
									v-if="item.discount_price == '0.00'"
								></image>
							</view>
							<view class="mt28">
								<text class="f28 text-bold u-skeleton-fillet">{{ item.title }}</text>
							</view>
							<view class="flex justify-between align-center  mt13 mb13">
								<view class="flex align-center ">
									<image src="../../static/time.png" mode="" class="w26 h26 u-skeleton-fillet"></image>
									<text class="f26 text-gray ml10 block u-skeleton-fillet" style="width: 70vw; overflow: scroll; white-space: nowrap;">
										活动时间：{{ item.show_time }}
									</text>
								</view>
								<view class="padding-tb-xs padding-lr-sm round bolck" style="background-color: #fff2f1">
									<text class="f24 u-skeleton-fillet" style="color: #f2736d ;white-space: nowrap;">{{ item.status }}</text>
								</view>
							</view>
							<!-- 0 未审核
                            <view class="mt28 flex align-center mb40" v-if="item.activity_list_status==0">
                               <image src="../../static/12162.png" mode="aspectFill" class="w26 h26"></image>
                               <text class="f26  ml10" style="color: #FB8681;">您的路演申请正在审核中...</text>
                            </view>
							
							1 审核通过
							<view class="mt28 flex align-center mb40" v-if="item.activity_list_status == 1">
								<image src="../../static/dui.png" mode="aspectFill" class="w26 h26"></image>
								<text class="f26 text-green ml10">您的路演申请通过，请按时与会</text>
							</view>
							2 审核未通过
							<view class="mt28 flex align-center mb40" v-if="item.activity_list_status == 2">
								<image src="../../static/12161.png" mode="aspectFill" class="w26 h26"></image>
								<text class="f26  ml10" style="color: #FB8681;">您的路演审核未通过，请下次提前预约</text>
							</view>
							3已报名
							
							<view class="mt28 flex align-center mb40" v-if="item.activity_list_status == 3">
								<image src="../../static/dui.png" mode="aspectFill" class="w26 h26"></image>
								<text class="f26 text-green ml10">您已报名,请按时与会</text>
							</view>
							4未报名
							<view class="mt28 flex align-center mb40" v-if="item.activity_list_status == 4">
								<image src="../../static/12161.png" mode="aspectFill" class="w26 h26"></image>
								<text class="f26  ml10" style="color: #FB8681;">活动未报名，请下次提前预约</text>
							</view>
							5 未登录
							<view class="mt28 flex align-center mb40" v-if="item.activity_list_status == 5">
								<image src="../../static/dui.png" mode="aspectFill" class="w26 h26"></image>
								<text class="f26 text-green ml10">活动可报名申请</text>
							</view>
							
							
							<!-- 0 未审核 1 审核通过 2 审核未通过   3 已报名  4 未报名   5 未登录 -->
						</view>
					</view>
				</z-paging>
			</view>
		</view>

		<view class="u-mask flex align-center justify-center" v-if="show" @click="show = !show">
			<view class="rect bg-img flex flex-direction animation-scale-up"></view>
		</view>

		<!-- <yy-tip :isCustom="false" /> -->
		<!-- <u-tabbar v-model="current" :list="tabbarList" :border-top="false" active-color="#F2736D" @change="change"></u-tabbar> -->
		<yy-login v-if="vuex_login"></yy-login>

		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
			<!--引用组件-->
				<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			keyword: '',
			//  0 未审核 1 审核通过 2 审核未通过   3 已报名  4 未报名   5 未登录
			data: {},
			dataList: [],
			user: {},
			slide: [],
			loading: true, // 是否显示骨架屏组件
		};
	},

	async onShow() {
		this.personalCtr();
		let href = await this.getQueryStringArgs(window.location.href);
		console.log('href :>> ', href);
		let sgnIn = await this.sgnIn(href.code);
		if (sgnIn.code) {
			uni.setStorageSync('data', sgnIn.data);
			uni.setStorageSync('token', sgnIn.data.token);
			uni.setStorageSync('user', sgnIn.data.user);
			let obj = {
				from_user_id: uni.getStorageSync('id'),
				to_user_id: sgnIn.data.user.id,
			};
			const res = await this.$u.post('Public/inviteRegister', obj, {});
			console.log('res :>> ', res);
		}
		console.log('sgnIn :>> ', sgnIn);
	},

	onLoad(e) {
		// alert(e.invite_code_encode)
		uni.setStorageSync('invite_code_encode', e.invite_code_encode);
		console.log('eeeeeeeeeee: ', e);
		uni.setStorageSync('id', e.id);
		uni.setStorageSync('share_code', e.share_code);
		// uni.setStorageSync('invite_code', e.invite_code);
		// if (e.scene) {
		// 	uni.setStorageSync('id', e.scene);
		// }
	},
	watch: {
		vuex_login(newValue, oldValue) {
			console.log('newValue: ', newValue);
			console.log('oldValue :>> ', oldValue);

			if (!newValue) {
				this.personalCtr();
			}
		},
	},
	methods: {
		async hm(pageNo, pageSize) {
			let obj = {
				page: pageNo,
				page_size: pageSize,
			};
			const res = await this.$u.post('index/index', obj);
			if (res.code) {
				res.data.slide.forEach(e => {
					this.slide.push({
						// image: e.image.replaceAll('\\', '/'),
						image: e.image,
					});
				});
				this.data = res.data;
				if (Object.keys(res.data.list).length==0) {
					console.log('1111 :>> ', 1111);
				   return  this.$refs.paging.complete([]);
				}
				console.log('2222 :>> ', 2222);
				this.$refs.paging.complete(res.data.list);
				
				
				
			}
		},
		async personalCtr() {
			const res = await this.$u.post('UserInfo/memberCard', {}, {});

			this.user = res.data;
			this.loading = false;
			console.log(' this.user: ', this.user);
		},
	},
};
</script>

<style lang="scss" scoped>
.u-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(127, 127, 127, 0.5);
	transition: 3s all;
	z-index: 222222;
	.rect {
		width: 520rpx;
		height: 620rpx;
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210617144543.png);
	}
}

.content_box {
	.boder {
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210616164845.png);
	}
	.bgimg {
		position: absolute;
		top: 0;
		left: 0;
		// transform: translateX(-50%);
	}
	.bgimg1 {
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210616111828.png);
	}
	.bgimg2 {
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210616111932.png);
	}
}
</style>
